<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService";

export default {
    name: "AddLineWithDirectionMarker.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            map.setCenter([121.49, 31.265])
            map.setZoom(16)

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_LINE_LAYER).addTo(map);

            let line = new maptalks.LineString(
                [
                    [121.486532373184, 31.261925842451],
                    [121.48760525679, 31.2623660518534],
                    [121.488763971084, 31.2639067685916],
                    [121.489665193313, 31.2648238499456],
                    [121.491939706557, 31.2642736022027],
                ],
                {
                    symbol: {
                        "lineColor": "#1bbc9b",
                        "lineWidth": 6,
                        // "lineDasharray": [10, 10],
                        "markerFile": filter("relativePath2Img")("plane.png"),
                        "markerPlacement": "point", //vertex, point, vertex-first, vertex-last, center
                        "markerVerticalAlignment": "middle",
                        "markerWidth": 10,
                        "markerHeight": 10
                    }
                }
            ).addTo(layer);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
